<template>
	<view class="wrap u-flex-col">
		<view class="step">
			<view class="stepBox">
				<view class="stepList">
					<view class="item" v-for="(_item, ind) in numList" :key="ind" :class="ind==0?'first':(ind==(numList.length-1)?'last active':'')">
						<text v-if="ind > 0" class="line"></text>
						<text class="yuan"></text>
						<text v-if="ind < numList.length - 1" class="line"></text>
						<view class="text">{{ _item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content u-flex-1">
			<view class="item u-flex">
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
				<view class="info u-flex-1">哈哈，我喜欢你说的，在说点好不好倒萨的呢爱卡卡是，爱上你的接口三季度撒</view>
				<view class="nullBox"></view>
			</view>
			<view class="item u-flex">
				<view class="nullBox"></view>
				<view class="info u-flex-1">
					<u-image src="@/static/images/p1.jpg" mode="widthFix"></u-image>
				</view>
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
			</view>
			<view class="item u-flex">
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
				<view class="info u-flex-1">哈哈，我喜欢你说的，在说点好不好倒萨的呢爱卡卡是，爱上你的接口三季度撒</view>
				<view class="nullBox"></view>
			</view>
			<view class="item u-flex">
				<view class="nullBox"></view>
				<view class="info u-flex-1">哈哈，我喜欢你说的，在说点好不好倒萨的呢爱卡卡是，爱上你的接口三季度撒</view>
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
			</view>
			<view class="item u-flex">
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
				<view class="info u-flex-1">哈哈，我喜欢你说的，在说点好不好倒萨的呢爱卡卡是，爱上你的接口三季度撒</view>
				<view class="nullBox"></view>
			</view>
			<view class="item u-flex">
				<view class="nullBox"></view>
				<view class="info u-flex-1">哈哈，我喜欢你说的，在说点好不好倒萨的呢爱卡卡是，爱上你的接口三季度撒</view>
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
			</view>
			<view class="item u-flex">
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
				<view class="info u-flex-1">哈哈，我喜欢你说的，在说点好不好倒萨的呢爱卡卡是，爱上你的接口三季度撒</view>
				<view class="nullBox"></view>
			</view>
			<view class="item u-flex">
				<view class="nullBox"></view>
				<view class="info u-flex-1">哈哈，我喜欢你说的，在说点好不好倒萨的呢爱卡卡是，爱上你的接口三季度撒</view>
				<view class="img"><u-image src="https://uviewui.com/common/logo.png" mode="widthFix"></u-image></view>
			</view>
		</view>
		<view class="chatBox u-flex">
			<view class="input u-flex-1"><input type="text" v-model="chatText" /></view>
			<view class="sendBtn">发送</view>
		</view>
		<view class="videoBox" v-if="showVideo"><text class="iconfont icon-remove" @click="showVideo = fasle"></text></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			numList: [{ name: '开始接通水管' }, { name: '消防战士带着消防设备' }, { name: '扑向火场' }, { name: '水枪喷水' }, { name: '火势控制中' },{ name: '开始接通水管' }, { name: '消防战士带着消防设备' }, { name: '扑向火场' }, { name: '水枪喷水' }, { name: '火势控制中' }],
			chatText: '',
			showVideo: false
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
uni-page-body,
.wrap {
	height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.step{
	background: #f8f8f8;
	height: 30%;
}
.stepBox {
	overflow: hidden;
	position: relative;
	margin: 20rpx;
	height: 100%;
	overflow-x: auto;
	
	.stepList {
		position: absolute;
		height: 100%;
		left: 0;
		transition: all 0.3s;
		white-space: nowrap;
	}
	.item {
		display: inline-block;
		position: relative;
		height: 100%;
		> text {
			float: left;
		}
		.line {
			width: 50rpx;
			height: 1px;
			background: #e8e8e8;
			margin-top: 15rpx;
		}
		.yuan {
			height: 30rpx;
			width: 30rpx;
			border-radius: 30rpx;
			background: #e8e8e8;
		}
		.text {
			height: calc(100% - 70rpx);
			position: absolute;
			overflow: hidden;
			width: 30rpx;
			top: 50rpx;
			left: 50rpx;
			white-space:normal;
			text-align: center;
			word-wrap:break-word;
			word-break: break-all;
			line-height: 1;
			color:#999;
			font-size:24rpx;
		}
		&.first{
			.text{
				left:0;
			}
		}
		&.active{
			.yuan{
				background: #2979FF;
			}
			.text{
				color:#666;
			}
		}
	}
}
.content {
	margin: 20rpx 0;
	overflow-y: auto;
	.item {
		align-items: flex-start;
		margin-bottom: 30rpx;
		.img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			overflow: hidden;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			margin: 0 30rpx;
			image {
				width: 100%;
			}
		}
		.info {
			font-size: 24rpx;
			color: #666;
			word-break: break-all;
			text-align: justify;
			vertical-align: top;
		}
		.nullBox {
			height: 50rpx;
			width: 150rpx;
		}
	}
}
.chatBox {
	height: 100rpx;
	background: #f8f8f8;
	padding-left: 30rpx;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	.input {
		input {
			width: 100%;
			height: 60rpx;
			background: #fff;
			padding: 0 20rpx;
			border-radius: 60rpx;
			line-height: 60rpx;
		}
	}
	.sendBtn {
		height: 60rpx;
		border-radius: 60rpx;
		padding: 0 30rpx;
		line-height: 60rpx;
		color: #fff;
		background: #2b85e4;
		margin: 0 30rpx;
	}
}
.videoBox {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 400rpx;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	.iconfont {
		position: absolute;
		font-size: 30rpx;
		top: 20rpx;
		right: 20rpx;
		color: #fff;
		z-index: 1000;
	}
}
</style>
